import React, {
    PureComponent
} from 'react';

import {
    View,
    Text,
    StyleSheet
} from 'react-native';

interface Item {
    id:string,
    label:string
}

interface Props {
    page:number,
    tabs:Array<Item>,
    onChange:Function
}

import {
    Press
} from './../../../components';

class Tabs extends PureComponent<Props> {

    static defaultProps = {
        page:0,
        tabs:[],
        onChange:() => null
    }

    render() {
        const {
            tabs,
            page,
            onChange
        } = this.props;

        return (
            <View style={styles.container}>
                <View style={styles.content}>
                    {tabs.map((
                        item:any,i:number
                    ) => {
                        const _styles = [
                            styles.itemStyle
                        ]
                        const selected = (
                            i === page
                        )
                        if(selected) {
                            _styles.push(
                                styles.selected
                            )
                        }
                        return (
                            <Press
                                key={i}
                                value={i}
                                style={_styles}
                                onPress={onChange}
                            >
                                <Text style={styles.itemText}>
                                    {item.label}
                                </Text>
                            </Press>
                        )
                    })}
                </View>
            </View>
        )
    }
}

export default Tabs;

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:`center`,
        justifyContent:`center`
    },
    content:{
        height:30,
        width:310,
        borderWidth:1,
        borderRadius:8,
        overflow:`hidden`,
        flexDirection:`row`,
        borderColor:`#DE0503`
    },
    itemStyle:{
        flex:1,
        alignItems:`center`,
        justifyContent:`center`
    },
    selected:{
        borderRadius:6,
        backgroundColor:`#f45`
    },
    itemText:{
        color:`#fff`,
        fontSize:14,
        fontWeight:`700`
    }
}) as any;